<template>
  <!-- 邀请加入圈子 搜索页面 -->
  <view class="main">
    <view class="top">
      <view class="top_s">
        <view class="left">
          <icon type="search" size="13" />
        </view>
        <view class="right">
          <input
            type="text"
            v-model="guanjian"
            placeholder="搜索成员"
            placeholder-style="color:rgba(153,153,153,1);font-size:24rpx"
            @blur="handleInput"
            @input="handleInput1"
          />
        </view>
        <view class="end" v-if="guanjian != ''" @click="handleClear">
          <icon type="clear" size="13" color="#000" />
        </view>
      </view>
    </view>
    <!-- 全换操作 -->
    <!-- <view class="quanxuan">
			<view></view>
			<view class="right">
				<image src="../../imges/weixuan.png" mode="aspectFill" v-if="!is_allChoose" @tap="handleNoAll"></image>
				<image src="../../imges/yixuan.png" mode="aspectFill" v-if="is_allChoose" class="choose" @tap="handleAll"></image>
				<text>全选</text>
			</view>
		</view> -->

    <view class="list_">
      <view
        class="item"
        v-for="(item, index) in data"
        :key="index"
        @tap="handleChoose(index)"
      >
        <view class="left">
          <image :src="item.avatarUrl" mode="aspectFill"></image>
          <text class="name">{{ item.realName }}</text>
          <text class="des">{{ item.topic }}</text>
        </view>
        <view class="right">
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!item.is_choose"
          ></image>
          <image
            src="../../imges/yixuan.png"
            mode="aspectFill"
            v-if="item.is_choose"
            class="choose"
          ></image>
        </view>
        <!-- <view class="right1" v-if="item.isInvite == 1"> 邀请过 </view> -->
      </view>
    </view>

    <view class="btn_bottom">
      <view class="btn" @tap="handleSend">
        发出邀请（{{ renChooseList.length }}人）
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      guanjian: "", //input值
      data: [],
      id: "",
      is_choose: false,
      renChooseList: [], //选中数组
      type: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.type = option.type;
  },
  methods: {
    sousuo(value) {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/home/searchByType?uid=d44428b419f611e983f6fa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            keywords: value,
            type: 2,
            pageNumber: 1,
            pageSize: 30,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            res.data.data.rows.map((item, index) => {
              that.data.push(Object.assign(item, { is_choose: false }));
            });
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleInput1(e) {
      //输入事件
      if (this.guanjian == "") {
        this.data = [];
      } else {
        this.sousuo(e.detail.value);
      }
    },
    handleClear() {
      //清除文本框
      this.guanjian = "";
      this.data = [];
    },
    handleInput(e) {
      //失焦事件（执行调用）
      // console.log(e)
      this.guanjian = e.detail.value;
      // console.log(this.is_input)
    },
    handleChoose(index) {
      //点击列表选择
      this.renChooseList = [];
      if (this.data[index].is_choose == false) {
        this.is_choose = false;
      }
      if (this.data[index].is_choose == true) {
        this.is_choose = true;
      }

      this.data[index].is_choose = !this.is_choose;
      this.is_choose = !this.is_choose;

      this.renChooseList = this.data.filter((v) => {
        //选中数组
        return v.is_choose == true;
      });
    },
    handleSend() {
      //发送邀请
      let list = [];
      for (var i = 0; i < this.data.length; i++) {
        list.push(this.data[i].createUid);
      }
      if (this.renChooseList.length == 0) {
        uni.showToast({
          title: "请先选择要发送的同事！",
          duration: 2000,
          icon: "none",
        });
        return false;
      } else {
        let token = uni.getStorageSync("token");
        const that = this;
        // console.log(token, 'token')
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/orgMessage/shareGenerateSocialMessage",
            // url: "app/friends/saveInvite",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              socialMessage: {
                msgType: 8007,
                relationId: this.id,
                businessType: 12,
              },
              userList: list,
              // friendsId: this.id,
              // list: list,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: "邀请成功",
                duration: 2000,
                icon: "none",
              });
              if (that.type == 1) {
                setTimeout(function () {
                  uni.navigateBack({
                    delta: 2,
                  });
                }, 1500);
              } else {
                setTimeout(function () {
                  uni.reLaunch({
                    url: "/pages/index/detail?id=" + that.id + "&type=1",
                  });
                }, 1500);
              }
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}

.main {
  padding-bottom: 120rpx;
  > .top {
    background-color: #fff;
    padding: 26rpx 32rpx;
    border-top: 2rpx solid #eee;
  }

  .top_s {
    width: 100%;
    height: 70rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2prx 30rpx 0px rgba(0, 0, 0, 0.06);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #0000000f;
    padding: 0 22rpx;
    box-sizing: border-box;
    box-shadow: 0px 2rpx 30rpx 0px rgba(0, 0, 0, 0.06);

    .left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6rpx;
    }

    .right {
      flex: 1;

      input {
        width: 100%;
        height: 100%;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }

    .end {
      height: 100%;
      display: flex;
      align-items: center;
      width: 50rpx;
      justify-content: center;
    }
  }

  .tabs {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 32rpx;
    // padding-top: 20rpx;
    display: flex;
    white-space: nowrap; // 滚动必须加的属性

    .item {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 42rpx;
      padding: 0 20rpx;
    }

    .active {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 45rpx;

      text {
        display: block;
        width: 36rpx;
        height: 6rpx;
        background: rgba(33, 104, 235, 1);
        border-radius: 3rpx;
        margin: 0 auto;
      }
    }
  }

  .quanxuan {
    padding: 18rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
      // display: flex;
      // align-items: center;

      image {
        width: 28rpx;
        height: 28rpx;
      }

      .choose {
        width: 38rpx;
        height: 38rpx;
        display: inline-block;
        margin-bottom: -6rpx;
        margin-right: -6rpx;
        // display: inline-block;
        // margin-top: -2rpx;
      }

      text {
        position: relative;
        top: -5rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 15rpx;
      }
    }
  }

  .list_ {
    margin-bottom: 167rpx;
    background-color: #fff;
    padding: 0 32rpx;

    .item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      height: 66rpx;
      align-items: center;
      border-bottom: 2rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .left {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        image {
          vertical-align: top;
          height: 66rpx;
          width: 66rpx;
          border-radius: 50%;
        }

        .name {
          display: inline-block;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          margin-left: 15rpx;
          margin-top: 12rpx;
        }

        .des {
          margin-left: 15rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }

      .right {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        image {
          width: 36rpx;
          height: 36rpx;
        }

        .choose {
          width: 120%;
          height: 120%;
        }
      }

      .right1 {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(33, 104, 235, 1);
      }
    }
  }

  .btn_bottom {
    border-top: 2rpx solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 100rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .btn {
      width: 686rpx;
      height: 74rpx;
      background: rgba(33, 104, 235, 1);
      border-radius: 46rpx;
      margin: 0 auto;
      line-height: 74rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
